<script setup lang="ts">
import { FileUpload } from "@ark-ui/vue/file-upload";
import { DownloadTrigger } from "@ark-ui/vue/download-trigger";
import {
  FileText,
  Upload,
  Download,
  Trash2,
  File as FileIcon,
  FileArchive,
  FileSpreadsheet,
  Video,
  Headphones,
  Image,
} from "lucide-vue-next";

const getFileExtension = (filename: string) => {
  const ext = filename.split(".").pop()?.toUpperCase();
  return ext || "FILE";
};

const getFileIcon = (file: File) => {
  const fileType = file.type;
  const fileName = file.name;

  if (
    fileType.includes("pdf") ||
    fileName.endsWith(".pdf") ||
    fileType.includes("word") ||
    fileName.endsWith(".doc") ||
    fileName.endsWith(".docx")
  ) {
    return FileText;
  } else if (
    fileType.includes("zip") ||
    fileType.includes("archive") ||
    fileName.endsWith(".zip") ||
    fileName.endsWith(".rar")
  ) {
    return FileArchive;
  } else if (
    fileType.includes("excel") ||
    fileName.endsWith(".xls") ||
    fileName.endsWith(".xlsx")
  ) {
    return FileSpreadsheet;
  } else if (fileType.includes("video/")) {
    return Video;
  } else if (fileType.includes("audio/")) {
    return Headphones;
  } else if (fileType.startsWith("image/")) {
    return Image;
  }
  return FileIcon;
};

const defaultFiles = [
  new File(["Welcome to Ark UI Vue`"], "document.pdf", {
    type: "text/plain",
  }),
  new File(["Welcome to Ark UI Vue, this is a zip file`"], "showcase.zip", {
    type: "application/zip",
  }),
  new File(["Welcome to Ark UI Vue, this is an excel file`"], "data.xlsx", {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  }),
  new File(["Welcome to Ark UI Vue, this is an audio file`"], "audio.mp3", {
    type: "audio/mpeg",
  }),
  new File(
    ["Welcome to Ark UI Vue, this is a video file`"],
    "documentary.mp4",
    {
      type: "video/mp4",
    }
  ),
];
</script>

<template>
  <FileUpload.Root
    :max-files="10"
    :max-file-size="100 * 1024 * 1024"
    class="w-full max-w-4xl"
    :default-accepted-files="defaultFiles"
  >
    <FileUpload.Context v-slot="context">
      <div class="space-y-4">
        <!-- Header -->
        <div class="flex items-center justify-between">
          <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
            Files ({{ context.acceptedFiles.length }})
          </h3>
          <div class="flex items-center gap-2">
            <FileUpload.Trigger
              class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-xs font-medium rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2"
            >
              <Upload class="w-3 h-3" />
              Add files
            </FileUpload.Trigger>
            <FileUpload.ClearTrigger
              v-if="context.acceptedFiles.length > 0"
              class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-xs font-medium rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2"
            >
              <Trash2 class="w-3 h-3" />
              Remove all
            </FileUpload.ClearTrigger>
          </div>
        </div>

        <!-- Table -->
        <div
          v-if="context.acceptedFiles.length > 0"
          class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-900"
        >
          <!-- Table Header -->
          <div
            class="grid grid-cols-12 gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
          >
            <div
              class="col-span-5 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"
            >
              Name
            </div>
            <div
              class="col-span-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"
            >
              Type
            </div>
            <div
              class="col-span-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"
            >
              Size
            </div>
            <div
              class="col-span-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"
            >
              Actions
            </div>
          </div>

          <!-- Table Body -->
          <FileUpload.ItemGroup>
            <FileUpload.Item
              v-for="(file, index) in context.acceptedFiles"
              :key="file.name"
              :file="file"
            >
              <div
                :class="`grid grid-cols-12 gap-3 px-4 py-3 ${
                  index !== context.acceptedFiles.length - 1
                    ? 'border-b border-gray-200 dark:border-gray-700'
                    : ''
                }`"
              >
                <!-- Name -->
                <div class="col-span-5 flex items-center gap-2 min-w-0">
                  <div
                    class="w-4 h-4 flex items-center justify-center shrink-0"
                  >
                    <FileUpload.ItemPreview
                      v-if="file.type.startsWith('image/')"
                      type="image/*"
                    >
                      <FileUpload.ItemPreviewImage
                        class="w-4 h-4 object-cover rounded"
                      />
                    </FileUpload.ItemPreview>
                    <component
                      v-else
                      :is="getFileIcon(file)"
                      class="w-4 h-4 opacity-60"
                    />
                  </div>
                  <FileUpload.ItemName
                    class="text-sm text-gray-900 dark:text-gray-100 truncate"
                  />
                </div>

                <!-- Type -->
                <div class="col-span-2 flex items-center">
                  <span class="text-sm text-gray-600 dark:text-gray-400">
                    {{ getFileExtension(file.name) }}
                  </span>
                </div>

                <!-- Size -->
                <div class="col-span-2 flex items-center">
                  <FileUpload.ItemSizeText
                    class="text-sm text-gray-600 dark:text-gray-400"
                  />
                </div>

                <!-- Actions -->
                <div class="col-span-3 flex items-center gap-2">
                  <DownloadTrigger
                    :data="file"
                    :file-name="file.name"
                    :mime-type="file.type"
                    class="w-6 h-6 flex items-center justify-center text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
                  >
                    <Download class="w-4 h-4" />
                  </DownloadTrigger>
                  <FileUpload.ItemDeleteTrigger
                    class="w-6 h-6 flex items-center justify-center text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
                  >
                    <Trash2 class="w-4 h-4" />
                  </FileUpload.ItemDeleteTrigger>
                </div>
              </div>
            </FileUpload.Item>
          </FileUpload.ItemGroup>
        </div>

        <!-- Empty State -->
        <FileUpload.Dropzone
          v-else
          class="w-full border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 flex flex-col items-center justify-center py-12 px-6 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer"
        >
          <div
            class="w-10 h-10 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 flex items-center justify-center mb-3"
          >
            <FileText class="w-4 h-4 text-gray-400 dark:text-gray-500" />
          </div>
          <div class="text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
              Drag & drop files here or click to browse
            </p>
            <p class="text-xs text-gray-500 dark:text-gray-400">
              Max 10 files • Up to 100MB each
            </p>
          </div>
        </FileUpload.Dropzone>
      </div>
    </FileUpload.Context>

    <FileUpload.HiddenInput />
  </FileUpload.Root>
</template>
